<!--ljx 2022.9.1 测试页面  -->
<template>
  <div>
    <div style="background-color: #f8f9fa; padding: 20px 0;">
      <div style="max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;">
        <div style="color: #6c757d;">
          <span @click="handleSelect('4','4')" class="titleitem">请登录</span> |
          <span class="titleitem">免费注册</span> |
          <span class="titleitem">您好,欢迎来到水果电商！</span>
        </div>
        <div>
          <span class="titleitem">我的订单</span> |
          <span class="titleitem">手机版</span> |
          <span class="titleitem">商家入驻申请</span> |
          <span class="titleitem">商家中心</span> |
          <span class="titleitem">平台客服</span>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px;">
      <div style="max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;">
        <div style="font-size: 24px; color: #28a745;">中国水果电商商城</div>
        <div style="width: 60%;">
          <el-input v-model="searchinput" placeholder="请输入查询信息" prefix-icon="el-icon-search">
            <el-button slot="append" type="primary" icon="el-icon-search">搜索</el-button>
          </el-input>
        </div>
        <div @click="handleSelect('3','3')" style="cursor: pointer; padding: 10px 20px; background-color: #ffc107; border-radius: 20px; color: #212529;">
          <i class="el-icon-shopping-cart-full" style="font-size: 20px;"></i> 我的购物车
        </div>
      </div>
    </div>
    <div style="background-color: #28a745; color: #ffffff;">
      <div style="max-width: 1200px; margin: 0 auto;">
        <el-menu :default-active="activeIndex1" mode="horizontal" background-color="#28a745" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">商品列表</template>
            <el-menu-item index="2-1">热销水果</el-menu-item>
            <el-menu-item index="2-2">当季水果</el-menu-item>
            <el-menu-item index="2-3">养生水果</el-menu-item>
          </el-submenu>
          <el-menu-item index="3">购物车</el-menu-item>
          <el-menu-item index="4">个人登录</el-menu-item>
          <el-menu-item index="5" style="margin-left: 45%;">
            <span style="padding-left: 10px;">登录人员：{{ this.$store.state.loginName }}</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div style="margin-top: 20px;">
      <div style="max-width: 1200px; margin: 0 auto; min-height: 500px;">
        <router-view></router-view>
      </div>
    </div>
    <div style="background-color: #343a40; color: #ffffff; padding: 20px 0;">
      <div style="max-width: 1200px; margin: 0 auto; text-align: center;">
        <p>版权所有: 宁波大学科学技术学院学生开发研究会 <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="nofollow">浙ICP备170127**号</a> 技术支持：<a href="http://www.zhitouseo.com" target="_blank" rel="nofollow">青年未来</a></p>
        <p>投资有风险，选择需谨慎</p>
      </div>
    </div>
  </div>
</template>





<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
//import bbb1 from './bbb1.vue'

export default {
  data() {
    //这里存放数据
    return {
      msg: '测试数据',
      searchinput: '',
      myobj:{myshow:true,goodtype:'热销水果'},
      myselect: '1',
      activeIndex: '1',
      imgs: ['/b1.jpg', '/b2.jpg', '/b3.jpg', '/b4.jpg']
    };
  },
  provide(){
    return{
      userInfo:this.myobj,
    };
  },

  //import引入的组件需要注入到对象中才能使用
  components: {

  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    frun() {
      alert('我是老大');
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      if (key == '1')
        this.$router.push('/')
      else if (key == '2-1')
        this.$router.push({
          path: '/indexlist',
          query: {
            goodtype: '热销水果'
          }
        })
      else if (key == '2-2')
        this.$router.push({
          name: 'indexlist',
          query: {
            goodtype: '当季水果'
          }
        })
      else if (key == '2-3')
        this.$router.push({
          name: 'indexlist',
          query: {
            goodtype: '养生水果'
          }
        })
      else if (key == '3')
        this.$router.push('/cart')
      else if (key == '4')
        this.$router.push('/loginT')
      else if (key == '5')
        this.$router.push('/booktest2')
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.username = localStorage.getItem("username");
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style>
body {
  font-family: 'Roboto', sans-serif;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.titleitem {
  cursor: pointer;
  margin: 0 10px;
}
.el-menu--horizontal .el-menu-item {
  border-bottom: none;
}
.el-menu--horizontal .el-menu-item.is-active {
  border-bottom: 3px solid #ffd04b;
}
</style>
